<template>
    <div class="device-card" @click="handleClick">
        <div class="card-header">
            <el-tooltip :content="device.meter_code" placement="top" effect="dark">
                <span class="device-id text-ellipsis">{{ device.meter_code }}</span>
            </el-tooltip>
            <el-tag :type="device.status === 'online' ? 'success' : device.status === 'error' ? 'danger' : 'info'"
                size="small">
                {{ device.status === 'online' ? '在线' : device.status === 'error' ? '异常' : '已离线' }}
            </el-tag>
        </div>
        <div class="card-body">
            <div v-if="type === 1" class="device-icon">
                <SvgIcon size="65px" icon="waterMeter"></SvgIcon>
            </div>
            <div v-if="type === 2" class="device-icon">
                <SvgIcon size="65px" icon="electricityMeter"></SvgIcon>
            </div>
            <div class="device-info">
                <div class="info-item">
                    <span class="label">区域：</span>
                    <el-tooltip :content="device.area" placement="top" effect="dark">
                        <span class="value text-ellipsis">{{ device.area }}</span>
                    </el-tooltip>
                </div>
                <div class="info-item">
                    <span class="label">安装位置：</span>
                    <el-tooltip :content="device.location" placement="top" effect="dark">
                        <span class="value text-ellipsis">{{ device.location }}</span>
                    </el-tooltip>
                </div>
                <!-- 根据设备类型显示不同信息 -->
                <template v-if="type === 1">
                    <div class="info-item">
                        <span class="label">水压：</span>
                        <el-tooltip :content="device.pressure || '不支持'" placement="top" effect="dark">
                            <span class="value text-ellipsis">{{ device.pressure || '不支持' }}</span>
                        </el-tooltip>
                    </div>
                </template>
                <template v-else>
                    <div class="info-item">
                        <span class="label">电压：</span>
                        <el-tooltip :content="device.voltage" placement="top" effect="dark">
                            <span class="value text-ellipsis">{{ device.voltage }}</span>
                        </el-tooltip>
                    </div>
                    <div class="info-item">
                        <span class="label">电流：</span>
                        <el-tooltip :content="device.current" placement="top" effect="dark">
                            <span class="value text-ellipsis">{{ device.current }}</span>
                        </el-tooltip>
                    </div>
                </template>
            </div>
        </div>
        <el-dialog :draggable="true" :append-to-body="true" style="height: 80vh; overflow: auto" title="表计详情"
            v-model="viewDialogVisible">
            <DeviceInfo></DeviceInfo>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useMeterStore } from '@/stores/meter';
import DeviceInfo from "@/views/DeviceCenter/DeviceInfo/components/DeviceInfo.vue"
import SvgIcon from "@/components/icon/SvgIcon.vue"

let props = defineProps({
    device: {
        type: Object,
        required: true
    },
    type: {
        type: Number,
        default: 1
    }
})

const viewDialogVisible = ref(false)
const meterStore = useMeterStore()

const handleClick = () => {
    meterStore.setCurrentMeter({
        ...props.device,
        ...props.device.originalData
    })
    viewDialogVisible.value = true


}
</script>

<style lang="scss" scoped>
.device-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .device-id {
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text-primary);
            max-width: 200px; // 设置最大宽度
        }
    }

    .card-body {
        flex: 1;
        display: flex;
        align-items: flex-end;
        gap: 40px;
        padding: var(--gap-small);

        .device-info {
            flex: 1;

            .info-item {
                margin-bottom: 8px;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                &:last-child {
                    margin-bottom: 0;
                }

                .label {
                    color: var(--color-text-regular);
                    width: 70px;
                    flex-shrink: 0;
                }

                .value {
                    color: var(--color-text);
                    max-width: 100px; // 设置最大宽度
                }
            }
        }
    }

    // 文本溢出省略号样式
    .text-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &:hover {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
        transition: all 0.3s ease;
    }
}
</style>